{% extends 'base_dashboard.html' %}

{% block title %}Reset Password — {{ user_obj.username }} — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .rp-user-banner {
    background: linear-gradient(90deg, #fffbeb, #fef3c7);
    border-radius: .75rem; padding: .875rem 1.125rem;
    display: flex; align-items: center; gap: .875rem;
    margin-bottom: 1.5rem; border-left: 3px solid #f59e0b;
  }
  .rp-user-banner .rpub-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 700; color: #fff; flex-shrink: 0;
  }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">Reset Password</h4>
        <p class="text-muted small mb-0">Set a new password for this user account</p>
    </div>
    <a href="{% url 'dashboard:manage_users' %}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Users
    </a>
</div>

<div style="max-width:560px;">

    <!-- User context banner -->
    <div class="rp-user-banner">
        <div class="rpub-avatar"
             style="background:{% if user_obj.role == 'admin' %}#ef4444{% elif user_obj.role == 'teacher' %}#059669{% else %}#1a56db{% endif %};">
            {{ user_obj.get_display_name|slice:":1"|upper }}
        </div>
        <div>
            <div class="fw-semibold small text-dark">
                {{ user_obj.get_display_name }}
                <span class="ms-1" style="font-size:.72rem;padding:.2em .65em;border-radius:2rem;
                    {% if user_obj.role == 'admin' %}background:#fee2e2;color:#b91c1c;
                    {% elif user_obj.role == 'teacher' %}background:#dcfce7;color:#15803d;
                    {% else %}background:#eff6ff;color:#1a56db;{% endif %}">
                    {{ user_obj.get_role_display }}
                </span>
            </div>
            <div class="text-muted" style="font-size:.75rem;">@{{ user_obj.username }}</div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-4">

    {% if errors %}
    <div class="alert alert-danger rounded-3 small mb-3">
        <i class="bi bi-exclamation-triangle-fill me-1"></i>
        <ul class="mb-0 ps-3">
            {% for error in errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <form method="post" novalidate>
        {% csrf_token %}

        <div class="mb-3">
            <label class="form-label fw-medium small" for="new_password1">
                New Password <span class="text-danger">*</span>
            </label>
            <div class="input-group">
                <input type="password" id="new_password1" name="new_password1"
                       class="form-control" placeholder="Enter new password"
                       autocomplete="new-password" required>
                <button class="btn btn-outline-secondary" type="button" id="togglePass1" tabindex="-1">
                    <i class="bi bi-eye" id="eyeIcon1"></i>
                </button>
            </div>
            <div class="form-text small text-muted">
                Min 8 characters. Cannot be entirely numeric or too common.
            </div>
        </div>

        <div class="mb-4">
            <label class="form-label fw-medium small" for="new_password2">
                Confirm Password <span class="text-danger">*</span>
            </label>
            <div class="input-group">
                <input type="password" id="new_password2" name="new_password2"
                       class="form-control" placeholder="Repeat new password"
                       autocomplete="new-password" required>
                <button class="btn btn-outline-secondary" type="button" id="togglePass2" tabindex="-1">
                    <i class="bi bi-eye" id="eyeIcon2"></i>
                </button>
            </div>
            <div id="matchFeedback" class="form-text small mt-1"></div>
        </div>

        <div class="d-flex gap-2 pt-2 border-top">
            <button type="submit" class="btn fw-semibold px-4"
                    style="background:#fef3c7;color:#92400e;border:1px solid #fde68a;">
                <i class="bi bi-key me-2"></i>Reset Password
            </button>
            <a href="{% url 'dashboard:manage_users' %}" class="btn btn-outline-secondary px-4">Cancel</a>
        </div>
    </form>
    </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    // Show/hide password toggles
    function makeToggle(btnId, inputId, iconId) {
        var btn = document.getElementById(btnId);
        var inp = document.getElementById(inputId);
        var ico = document.getElementById(iconId);
        if (!btn) return;
        btn.addEventListener('click', function () {
            if (inp.type === 'password') {
                inp.type = 'text';
                ico.className = 'bi bi-eye-slash';
            } else {
                inp.type = 'password';
                ico.className = 'bi bi-eye';
            }
        });
    }
    makeToggle('togglePass1', 'new_password1', 'eyeIcon1');
    makeToggle('togglePass2', 'new_password2', 'eyeIcon2');

    // Live match indicator
    var p1 = document.getElementById('new_password1');
    var p2 = document.getElementById('new_password2');
    var fb = document.getElementById('matchFeedback');

    function checkMatch() {
        if (!p2.value) { fb.textContent = ''; p2.classList.remove('is-valid','is-invalid'); return; }
        if (p1.value === p2.value) {
            fb.innerHTML = '<span class="text-success"><i class="bi bi-check-circle me-1"></i>Passwords match</span>';
            p2.classList.add('is-valid'); p2.classList.remove('is-invalid');
        } else {
            fb.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Passwords do not match</span>';
            p2.classList.add('is-invalid'); p2.classList.remove('is-valid');
        }
    }
    p1.addEventListener('input', checkMatch);
    p2.addEventListener('input', checkMatch);
})();
</script>
{% endblock %}